<template>
  <el-card>
    <div slot="header">
      <h3>修改SKU规格-表单查看页面</h3>
    </div>
    <el-form
      ref="formData"
      label-width="120px"
      class="input--reason--wrap"
      disabled
      :model="formData">
      <el-form-item prop="launchReasonType" label="发起原因：">
        <el-select v-model="formData.launchReasonType" clearable>
          <el-option
            v-for="option in formData.launchReasonTypeOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="launchReasonDesc" label="发起原因说明：">
        <el-input
          type="textarea"
          resize="none"
          v-model.trim="formData.launchReasonDesc"
          placeholder="请输入发起原因说明"
          :autosize="{ minRows: 3, maxRows: 4 }"
          :maxlength="100"
          show-word-limit/>
      </el-form-item>
    </el-form>
    <el-row class="page_wrap">
      <SkusTable
        :defaultMinWidth="120"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
      />
    </el-row>
    <FooterFields :footerFields="footerFields" />
  </el-card>
</template>
<script>
import { viewTableColumns, LAUNCH_REASON_OPTIONS } from './constants';
import SkusTable from '@/components/skusTable';
import FooterFields from '@/pages/commodity/components/FooterFields';
import {
  getRecordInfoService,
} from '@/api/commodity/commodityManage/chageFromManage/skuSpecEdit';
export default {
  components: {
    SkusTable,
    FooterFields
  },
  data () {
    return {
      formData: {
        // 发起原因类型
        launchReasonType: '',
        // 发起原因说明
        launchReasonDesc: '',
        // 发起原因选择框
        launchReasonTypeOptions: LAUNCH_REASON_OPTIONS
      },
      tableInfo: {
        list: [], // 表格数据
        columns: viewTableColumns, // 表格columns
        loading: false // 表格加载loading
      },
      footerFields: {},
    };
  },
  mounted () {
    const { recordNo } = this.$route.query;
    this.getTableDataFn(recordNo);
  },
  methods: {
    // 获取表格数据
    async getTableDataFn (recordNo) {
      const data = { recordNo };
      const retData = await getRecordInfoService(data, 'page_wrap');
      if (retData) {
        this.tableInfo.list = retData.skuSpecVoList;
        this.formData.launchReasonType = retData.launchReasonType;
        this.formData.launchReasonDesc = retData.launchReasonDesc;
        this.footerFields = retData;
      }
    },
  }
}
</script>

<style scoped>

</style>
